<template>
  <div class="company-select">
    <Select
      filterable
      clearable
      placeholder="商品选择"
      @on-change="valueChanged"
      :value = "modelId"
      @on-query-change="(name) => bloc.load(name)"
    >
      <Option
        v-for="item in bloc.paged.items"
        :value="item.modelId"
        :key="item.modelId"
      >{{ item.modelName }}</Option
      >
    </Select>
  </div>

</template>

<script  lang='ts'>
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import { ProductSelectorBloc } from '@/component/bloc/ProductSelectorBloc';
    @Component
    export default class UserSelector extends Vue {
        @Prop({ type: String })
        readonly modelId!: String;

        bloc = new ProductSelectorBloc();

        mounted() {
            this.bloc.load('');
        }
        valueChanged(value) {
            this.$emit('on-change', value);
        }
    }
</script>

<style scoped>

</style>
